@import "reset";
@charset "UTF-8";
@mixin com {
    position: absolute;
    background: #8d2bcc;
    border-radius: 50%;
    width: r(200px);
    height: r(200px);
}

.top-img {
    width: 100%;
    height: 100%;
    img {
        width: 100%;
        height: 100%;
    }
}

.mid-img {
    width: 100%;
    height: 100%;
    img {
        width: 100%;
        height: 100%;
    }
}

.web p {
    font-weight: bold;
    text-align: center;
    font-size: r(50px);
    color: #8d2bcc;
}

.bottom {
    position: relative;
    .bottom-text {
        position: absolute;
        top: r(200px);
        left: r(40px);
        font-size: r(25px);
        color: black;
        text-align: center;
    }
}

.huangheban {
    @include com;
    top: r(50px);
    left: r(80px);
    input {
        background-image: url(../img/tu1.png);
        background-repeat: repeat;
        background-size: contain;
    }
}

.queban {
    @include com;
    top: r(50px);
    left: r(360px);
    input {
        background-image: url(../img/tu2.png);
        background-repeat: repeat;
        background-size: contain;
    }
}

.shaiban {
    @include com;
    top: r(300px);
    left: r(80px);
    input {
        background-image: url(../img/tu3.png);
        background-repeat: repeat;
        background-size: contain;
    }
}

.qitai {
    @include com;
    top: r(300px);
    left: r(360px);
    input {
        background-image: url(../img/tu4.png);
        background-repeat: repeat;
        background-size: contain;
    }
}